<template>
  <div class="case-manager">

    <el-row>
      <el-col :span="5">
        <group ref="apiGroup" @getApiCase="getCase"></group>
      </el-col>

      <el-col :span="19">
        <div class="case-content">
          <h3 class="api-title">用例数 （ {{caseList.params.caseCount}} ）个</h3>

          <div style="margin-top:10px;margin-bottom:5px">
            <el-input v-model="caseList.params.keyword" placeholder="可按接口名、路径、编写人搜索" clearable style="width:350px"></el-input>

            <el-button type="text" @click="clickMore(isShowMore)">更多筛选
              <i v-if="!isShowMore" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
            </el-button>
            <el-button class="export-api" type="success" size="small" @click="clickExportExcel()"><i class="el-icon-plus"></i>导出</el-button>
            <el-button class="export-api" type="primary" size="small" @click="clickAddCase()"><i class="el-icon-plus"></i>添加用例</el-button>

            <div style="margin-top:10px" v-if="isShowMore">
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="接口名">
                  <el-input placeholder="请输入接口名"></el-input>
                </el-form-item>
                <el-form-item label="路径">
                  <el-input placeholder="请输入路径"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select placeholder="状态" v-cloak v-model="caseList.params.status">
                    <el-option label="未完成" :value=0></el-option>
                    <el-option label="设计中" :value=1></el-option>
                    <el-option label="开发" :value=2></el-option>
                    <el-option label="对接" :value=3></el-option>
                    <el-option label="测试" :value=4></el-option>
                    <el-option label="完成" :value=5></el-option>
                    <el-option label="异常" :value=6></el-option>
                    <el-option label="维护" :value=7></el-option>
                    <el-option label="废弃" :value=8></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search">查询</el-button>
                </el-form-item>
              </el-form>
            </div>

            <template>
              <addCase ref="addCase" @getCase="getCase"></addCase>
            </template>

            <div>

            </div>

          </div>

          <el-table :data="caseList.list" border style="width: 100%" id="caseManager" stripe :header-cell-style="headerCellClass" v-loading="loading">
            <el-table-column sortable fixed prop="id" label="编号" width="80">
            </el-table-column>
            <el-table-column sortable prop="name" label="用例名" width="150">
            </el-table-column>
            <el-table-column sortable prop="priority" label="优先级别" width="150">
              <template slot-scope="scope">
                <el-tag type="success">{{scope.row.priority}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column sortable prop="steps" label="步骤数" width="150">
            </el-table-column>
            <el-table-column prop="groupName" label="分组" width="120">
            </el-table-column>
            <el-table-column sortable prop="status" label="标签" width="120">
              <template slot-scope="scope">
                <el-tag>{{scope.row.tag}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column sortable prop="userName" label="添加人" width="120">
            </el-table-column>
            <el-table-column sortable prop="createTime" label="添加时间" width="180">
            </el-table-column>
            <el-table-column sortable prop="updateTime" label="更新时间" width="180">
            </el-table-column>
            <el-table-column prop="zip" label="操作" width="160" fixed="right">
              <template slot-scope="scope">

                <el-button type="text" style="color:rgb(24, 144, 255)" size=small @click="clickUpdateCase(scope.row)">编辑</el-button>
                <el-button type="text" style="color:red" size=small>删除</el-button>
                <router-link :to="{path:'/AiTestingInterface-project/batchCase/?case_id=' +scope.row.id , params:{case_id: scope.row.id } }">
                  <el-button type="text" size=small>测试步骤</el-button>
                </router-link>
              </template>

            </el-table-column>
          </el-table>

          <div style="margin-top:50px">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="caseList.params.currentPage" :page-sizes="[20, 30, 50, 100,200]" :page-size="caseList.params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="caseList.params.caseCount">
            </el-pagination>
          </div>

        </div>

      </el-col>
    </el-row>

  </div>
</template>


<script>
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import group from './group/group.vue'
import { isEmpty } from '@/utils/baseUtil'
import addCase from './components/addCase.vue'
export default {
  data () {
    return {
      isShowMore: false,
      loading: false,
      projectId: 0,

      caseList: {
        list: [],
        params: {
          apiCount: 101,
          caseCount: 100,
          keyword: '',
          status: 0,

          pageIndex: 1,
          pageSize: 20,

          currentPage: 1,

        },
      },

      headerCellClass: {
        'background-color': 'rgb(242, 242, 242)',
        'font-weight': 'bold',
        'color': 'rgb(39, 38, 38)',
        'height': '39px',
      }

    }
  },

  components: {
    group,
    addCase
  },

  methods: {

    //点击更多筛选
    clickMore (isShowMore) {
      if (isShowMore) {
        this.isShowMore = false
      } else {
        this.isShowMore = true
      }
    },

    //获取用例列表
    getCase (requestType, projectId, groupId, interfaceId, testCaseId, keyword, pageIndex, pageSize) {

      this.loading = true
      if (requestType == 'son') {
        this.caseList.params.pageIndex = 1
        this.caseList.params.currentPage = 1
      }
      projectId = projectId || this.projectId
      interfaceId = interfaceId || ''
      keyword = keyword || this.caseList.params.keyword
      testCaseId = testCaseId || ''
      pageIndex = pageIndex || this.caseList.params.pageIndex
      pageSize = pageSize || this.caseList.params.pageSize
      this.$http({
        url: this.$http.adornUrl('/aitesting/testCase/getTestCaseByCondition'),
        method: 'get',
        params: {
          projectId: projectId,
          groupId: groupId,
          interfaceId: interfaceId,
          testCaseId: testCaseId,
          keyword: keyword,
          pageIndex: pageIndex,
          pageSize: pageSize,
        }
      }).then(({ data }) => {
        if (data.code === 0) {
          this.caseList.params.caseCount = data.page.count
          this.caseList.list = data.page.testCase
        } else {
          this.$message({
            message: data.msg,
            type: 'warning'
          });
        }
        this.loading = false

      })

    },

    //点击添加用例
    clickAddCase () {
      this.$refs.addCase.dialogVisible = true
      this.$refs.addCase.type = 'add'
      this.$refs.addCase.typeName = '添加用例'
      this.$refs.addCase.casesForm = {
        groupId: null,
        name: '',
        priority: 'P2',
        tag: '回归',
        status: 1,
      }
    },

    //点击编辑用例
    clickUpdateCase (row) {
      this.$refs.addCase.dialogVisible = true
      this.$refs.addCase.type = 'update'
      this.$refs.addCase.typeName = '编辑用例'
      this.$refs.addCase.casesForm = JSON.parse(JSON.stringify(row))
    },

    //导出excel
    clickExportExcel () {
      var aData = new Date();
      let time = aData.getFullYear() + "" + (aData.getMonth() + 1) + "" + aData.getDate();

      var reportTitle = '接口管理表' + time + '.xlsx'
      let fix = document.querySelector('.el-table__fixed')
      let fixTwo = document.querySelector('.el-table__fixed-right')
      var wb;
      var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
      wb = XLSX.utils.table_to_book(document.querySelector('#caseManager'), xlsxParam);
      if (fix) {
        wb = XLSX.utils.table_to_book(document.querySelector('#caseManager').removeChild(fix), xlsxParam);
        document.querySelector('#caseManager').appendChild(fix);
      }
      if (fixTwo) {
        wb = XLSX.utils.table_to_book(document.querySelector('#caseManager').removeChild(fixTwo), xlsxParam);
        document.querySelector('#caseManager').appendChild(fixTwo);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector('#caseManager'), xlsxParam);
      }
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream'
          }),
          reportTitle
        );
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout);
      }
      return wbout;
    },



    //上一页
    prevClickChange (val) {
      this.caseList.params.pageIndex = val
      this.getCase('father')
    },

    //下一页
    nextClickChange (val) {
      this.caseList.params.pageIndex = val
      this.getCase('father')

    },
    //页大小变更
    handleSizeChange (val) {
      this.caseList.params.pageSize = val
      this.getCase('father')
    },

    //当前页变更
    handleCurrentChange (val) {
      this.caseList.params.pageIndex = val
      this.getCase('father')
    },
  },


  watch: {
    //关键字搜索
    'caseList.params.keyword' (val, oldVal) {
      //普通的watch监听
      this.getCase('', this.projectId);
    },

  },


  activated () {
    this.projectId = this.$store.state.api.projectId

    this.getCase('father')

  },




}
</script>

<style scoped>
.case-content {
  margin-left: 4px;
}

.export-api {
  float: right;
  margin-right: 4px;
  text-align: right;
}
</style>